<template>
  <div class="computed">
    <button @click="num++">买驴</button>
    <p>驴的数量：{{ num }}头</p>
    <p>蹄子的数量：{{ num * 4 }}个</p>
    <!-- 计算属性的插值绑定不需要加括号 -->
    <p>蹄子的数量：{{ legNum }}个</p>
    <p>蹄子的数量：{{ legNum }}个</p>
    <p>蹄子的数量：{{ legNum }}个</p>
    <p>蹄子的数量：{{ legNum }}个</p>
    <!-- <p>蹄子的数量：{{ num++ }}个</p> -->

    <form>
      <label>
        <input v-model="formData.gender" type="checkbox" value="男" />男
      </label>
      <label>
        <input v-model="formData.gender" type="checkbox" value="女" />女
      </label>
      <input v-model="formData.height" placeholder="身高"/>
    </form>

    <ul>
      <li v-for="d in filterList" :key="d.name">
        {{ d.name }} - {{ d.gender }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 2, // 驴的数量
      formData: {
        gender: [],
        height: "",
      },
      list: [
        {
          name: "小红",
          gender: "女",
          height: 180,
        },
        {
          name: "小黄",
          gender: "女",
          height: 160,
        },
        {
          name: "小绿",
          gender: "男",
          height: 150,
        },
      ],
    };
  },
  computed: {
    // 计算属性是个方法，必须有返回值
    // 计算属性有缓存，他的依赖发生变化时，才会重新计算
    legNum: function () {
      console.log("计算");
      return this.num * 4;
    },
    filterList() {
      console.log('filter')
      let r = this.list.filter(i => {
          return this.formData.gender.includes(i.gender) && this.formData.height <= i.height;
      })
      console.log(r)
      return r;
    }
  },
};
</script>
